<template>
  <el-dialog title="新增" :visible.sync="dialog.dialogVisible" @close="close" :width="dialog.width">
    <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="问卷标题:">
      <el-input type="textarea" v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="问卷描述:">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="10">
        <el-form-item label="问卷日期:">
          <el-date-picker v-model="form.date"   type="datetimerange" 
            range-separator="至"  start-placeholder="开始日期"    end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="2"><span v-html="'&nbsp;'"></span></el-col>
      <el-col :span="12">
        <el-form-item label="是否发布:">
          <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="form.status"></el-switch><span v-html="'&nbsp;&nbsp;&nbsp;'"></span> {{form.status ? "创建并发布问卷":"仅仅创建问卷"}}
        </el-form-item>
      </el-col>
    </el-row>

    <div class="black-space-30"></div>
    <el-table :data="form.subject"  border style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column label="题目"  align="center"  width="280">
        <template slot-scope="scope">
          <el-input type="textarea" v-model="scope.row.title"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型"  align="center"  width="120">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="选择题目类型">
            <el-option v-for="item in types" :key="item.id"
                  :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="必填" width="65"  align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.must" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template> 
      </el-table-column>
      <el-table-column label="选项"  align="center">
        <template slot-scope="scope">
          <el-tag  :key="tag.id" v-for="tag in scope.row.options"  closable  :disable-transitions="false"
            @close="handleClose(tag,scope.$index)"> {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag" v-if="inputVisible[scope.$index]" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm(scope.$index)">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index)">+ 添加选项</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="95"  align="center" fixed="right">
        <template slot-scope="scope" >
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSub(scope.$index)">删除</el-button>
        </template>
      </el-table-column>      
    </el-table>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-row>
      <el-col :span="2"><el-button @click="addSub">添加题目</el-button></el-col>
      <el-col :span="22">
        <el-button @click="closeDialog">取 消</el-button>
        <el-tooltip class="item" effect="dark" content="双击重置表格数据" placement="top">
           <el-button type="danger" @dblclick.native="resetForm">重置</el-button>
        </el-tooltip>
        <el-button type="success" @click="submitFrom">{{form.status ?'发 布':'保 存'}}</el-button>
      </el-col>
    </el-row>
  </div>
</el-dialog>

  
</template>

<script>
import {  ref,  reactive ,watch} from "@vue/composition-api";
import {  checkForm } from "@/utils/check"; 
import {  CreateQuestion } from "@/api/question"; 
export default {
  name: "addDialog",
  props: {
    flag: {
      type: Boolean,
      default: false
    }
  },
  setup(props, {attrs, emit, root, refs }) {
   const types = reactive([
      { type:"radio",name:"单选"}, 
      { type:"check",name:"多选" },
      { type:"text",name:"文本" }
    ])

    const value1 =reactive([new Date() ,new Date()]) 

    const  inputVisible = ref([]) ;
    const  inputValue = ref('') ;

    const dialog = reactive({
      dialogVisible : false,
      width: "1200px"
    });
    const form = reactive({
      status:true ,
      title : "", 
      desc:"",
      date:[] ,
      subject:[]
    });
    watch(() => {
      dialog.dialogVisible = props.flag;
    })
    const close = ()=>{
      dialog.dialog_info_flag = false;
      emit("update:flag", false);
    }

    const addSub =()=>{
      form.subject.push({ title:"",  must: true , type:"radio",  options:[]
      })
    }
    const deleteSub =(index)=>{   form.subject.splice(index,1) ;  }


    const handleClose= (tag,index)=> {
      console.log(tag,index)
      console.log(form.subject)
      form.subject[index].options.splice( form.subject[index].options.indexOf(tag), 1);
    }
    const showInput = (index)=> {
      // 深度监听
      root.$set(inputVisible.value,index,true) ;
      // 聚焦
      // root.$nextTick(() => {
      //   refs.saveTagInput[0].input.focus();
      // }); 
    }
   const handleInputConfirm = (index)=> {
        if (inputValue.value) {
          form.subject[index].options.push(inputValue.value);
        }
        inputVisible.value[index] = false ;
        inputValue.value = "";
      }
    const closeDialog =()=>{
      // 判断是否有内容
      if(form.title!=""){
        let res=confirm("还未提交，确认退出吗?") ;
        if(res == false){
          return ;
        }
      }
      dialog.dialogVisible = false ;
    }
    const submitFrom =()=>{
      console.log("form====",form) ;
      console.log("value1-----",form.date)
      // 如果检查通过 进行提交
      if(checkForm(form)){
        CreateQuestion(form).then((rep)=>{
          if(rep.data.status == 0){
            root.$confirm('添加成功!, 是否继续添加?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(()=>{
              // 重置表格
              alert("重置表格") ;
              resetForm() ;
            }).catch(()=>{
              // 退出   重置表格
              dialog.dialogVisible = false ;
              resetForm() ;
            })
          }else{
            root.$message({
                type: 'error',
                message: '添加失败,稍后重试!',
                center: true
            });
          }
        }).catch((error)=>{
          console.log(error) ;
        })
      }
    }
    // 重置表格 sure 表示是否需要确认
    const resetForm = ()=>{
      form.title ="" ; form. status=true ;   form.title = "";  
      form. desc="";  form. date=[] ;    form. subject=[]  ;
    }
    return {
     types, dialog ,form ,inputVisible , inputValue ,
      close,addSub,deleteSub    , handleClose , showInput,handleInputConfirm ,closeDialog ,submitFrom ,resetForm
    };
  }
};
</script>

<style lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    font-size: 14px;
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
